<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <title>Phoenix - Forms - layout</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- ===================== Touch Icons ===================== -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57-precomposed.png">

    <!-- ===================== CSS ===================== -->    
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>  
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap-responsive.min.css">    

    <!-- Site specific - CSS -->   
    <link rel="stylesheet" href="css/theme_light/prettify.css">
    
    <!-- Common - CSS -->  
    <link rel="stylesheet" href="css/theme_light/common.css">
    <link rel="stylesheet" href="css/theme_light.css" class="style_set">
    
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body> 
    <div id="loader_cont"><img src="img/loaders/page_loader.gif"></div> 
    <div class="options_cont">
      <form name="myForm">
        <a class="options_btn" href="#">OPTIONS</a> 
        <div class="options group">
          <div>
            <p>Background image:</p>
            <ul class="background_list">
              <li><a class="current" id='bg_1' href="#">bg_1</a></li>
              <li><a id='bg_2' href="#">bg_2</a></li>
              <li><a id='bg_3' href="#">bg_3</a></li>
              <li><a id='bg_4' href="#">bg_4</a></li>
              <li><a id='bg_5' href="#">bg_5</a></li>
              <li><a id='bg_6' href="#">bg_6</a></li>
              <li><a id='bg_7' href="#">bg_7</a></li>
              <li><a id='bg_8' href="#">bg_8</a></li>
              <li><a id='bg_9' href="#">bg_9</a></li>
              <li><a id='bg_10' href="#">bg_10</a></li>
            </ul>
          </div>
          <div>
            <p>Color styling:</p>
            <ul class="color_list">
              <li><a class="current" id='c_1' href="#" title="Rose">rose</a></li>
              <li><a id='c_2' href="#" title="Orange">orange</a></li>
              <li><a id='c_3' href="#" title="Apple Green">apple_green</a></li>
              <li><a id='c_4' href="#" title="Sky Blue">sky_blue</a></li>
              <li><a id='c_5' href="#" title="Purple">purple</a></li>
            </ul>            
          </div>
          <div>
            <p>Patterns:</p>
            <ul class="pattern_list">
              <li><a class="current" id='p_1' href="#" title="Stripes Right">p_1</a></li>
              <li><a id='p_2' href="#" title="Stripes Left">p_2</a></li>
              <li><a id='p_3' href="#" title="Noise">p_3</a></li>
              <li><a id='p_4' href="#" title="Plain">p_4</a></li>              
            </ul>            
          </div>
          <div class="top_mn_setup">
            <p>Display top menu on:</p>
            <div>
              <input id="top_menu_click" checked="checked" type="radio" value="1" class="menu_show" name="top_menu_show"><label for="top_menu_click">Click</label>
              <input id="top_menu_hover" type="radio" value="0" class="menu_show" name="top_menu_show"><label for="top_menu_hover">Hover</label>
            </div>            
          </div>  
          <div class="clear_cache_cont"><a class="btn btn-mini" href="#">Clear Cache</a></div>              
        </div> 
      </form> 
    </div>    
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="sweet-gray sweet-go-back-from-screen">&nbsp;</span>
          </a>
          <div class="nav-collapse">            
            <ul class="nav main_nav" role="navigation">                
                <li id="mail" class="styled dropdown mail">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Mail<span class="info">2</span></a>
                  <ul class="dropdown-menu top_menu">
                      <li><a class="mn_new_msg" href="mail.html"><span>New Message</span></a></li>
                      <li><a class="mn_inbox" href="mail.html"><span>Inbox</span></a></li>
                      <li><a class="mn_outbox" href="mail.html"><span>OutBox</span></a></li>
                      <li><a class="mn_spam" href="mail.html"><span>Spam</span></a></li>
                      <li><a class="mn_trash" href="mail.html"><span>Trash</span></a></li>
                  </ul>
                </li>
                <li id="chat" class="styled chat">
                  <a data-toggle="modal" href="#chat_modal">Chat<span class="info">5</span></a>     
                </li>
                <li id="notification" class="styled dropdown notification">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Notification<span class="info">4</span></a>
                  <ul class="dropdown-menu">
                    <li>
                        <a href="#">                          
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            <span>07/19/2012</span>                       
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          Vivamus ut enim vitae nibh aliquet pre-tium lobortis sit amet tortor...
                            <span>07/19/2012</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          Ut id dui arcu, non tempus nunc...
                            <span>07/19/2012</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          Morbi faucibus suscipit nibh, ut pellen-tesque lectus pellentesque non....
                            <span>07/19/2012</span>
                        </a>
                    </li>                        
                    <li class="show_all"><a href="#">Show all notifications</a></li> 
                  </ul>
                </li>                          
            </ul> 
            <ul class="main_nav nav pull-right">                
                <li id="search" class="search"> 
                  <a href="#">Search</a> 
                  <div class="search_cont">
                      <form class="navbar-search form-search">                          
                          <input type="text" class="input-medium search-query" placeholder="Search">
                          <button type="submit">Search</button>
                      </form> 
                  </div>              
                </li> 
                <li id="settings" class="styled dropdown settings">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Settings</a>
                    <ul class="dropdown-menu top_menu">
                        <li class="show_all">Settings</li>
                        <li><a class="mn_site" href="#"><span>Site</span></a></li>
                        <li><a class="mn_admin" href="#"><span>Admin</span></a></li>
                        <li><a class="mn_mail" href="#"><span>Mail</span></a></li>
                        <li><a class="mn_user" href="#"><span>User</span></a></li>
                    </ul>
                </li>
                <li id="profile" class="styled dropdown profile">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Profile</a>
                    <ul class="dropdown-menu top_menu">                        
                        <li class="profile group">
                          <img src="img/general/user_1.jpg" width="50" height="50" alt="User">
                          <ul>
                            <li><strong>John Doe</strong></li>
                            <li>@johndoe</li>
                            <li><span>Administrator</span></li>
                          </ul>
                        </li>
                        <li><a class="mn_settings" href="#"><span>My Settings</span></a></li>
                        <li><a class="mn_profile" href="profile.html"><span>My Profile</span></a></li>
                        <li><a class="mn_logout" href="login.html"><span>Logout</span></a></li>
                    </ul>
                </li>                          
            </ul>           
          </div>
          <h1 class="brand"><a href="index-2.html">PHOENIX</a></h1>                                       
        </div>
      </div>
    </div>
            
    <div class="container">              
      <div class="main_content row-fluid">

        <div class="span3">

          <div class="side_nav sidebar-nav" data-spy="affix" data-offset-top="150">
			      <h3 class="main_menu group">
                <span class="title">Main Menu</span>
                <a id="nav_list_btn" class="btn-collapse btn btn-inverse">
                  <span class="sweet-gray sweet-go-back-from-screen">&nbsp;</span>              
                </a>
            </h3>
            <ul class="nav nav-list">                          
              <li><a class="home" href="index-2.html">Dashboard</a></li>
              <li class="sub active open">
                <a class="forms" href="#">Forms<span>5</span></a>
                <ul>
                  <li class="active"><a href="forms_layout.html">Layout</a></li>
                  <li><a href="forms_elements.html">Elements</a></li>
                  <li><a href="forms_validation.html">Validation</a></li>
                  <li><a href="forms_wizard.html">Wizard</a></li>
                  <li><a href="forms_uploader.html">File uploader &amp; WYSIWYG</a></li>                                                      
                </ul>
              </li>
              <li><a class="charts" href="charts.html">Charts</a></li>
              <li class="sub">
                <a class="tables" href="#">Tables<span>2</span></a>
                <ul>
                  <li><a href="tables_basic.html">Basic</a></li>
                  <li><a href="tables_advanced.html">Advanced</a></li>
                </ul>
              </li>
              <li><a class="calendar" href="calendar.html">Calendar</a></li>
              <li><a class="gallery" href="gallery.html">Gallery</a></li>
              <li class="sub">
                <a class="uielements" href="#">UI Elements<span>8</span></a>
                <ul>
                  <li><a href="accordions.html">Accordions</a></li>                  
                  <li><a href="buttons_icons.html">Buttons and Icons</a></li>
                  <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
                  <li><a href="progressbars.html">Progressbars</a></li>                  
                  <li><a href="sliders.html">Sliders</a></li>                                    
                  <li><a href="tabs.html">Tabs</a></li>        
                  <li><a href="tooltips_popovers.html">Tooltips and Popovers</a></li>                                    
                  <li><a href="miscellaneous.html">Misc</a></li>
                </ul>
              </li>              
              <li><a class="filemanager" href="file_manager.html">File Manager</a></li>
              <li><a class="typography" href="typography.html">Typography</a></li>
              <li><a class="gridsystem" href="grid_system.html">Grid System</a></li>
              <li><a class="widgets" href="widgets.html">Widgets</a></li>
              <li class="sub">
                <a class="pages" href="#">Pages<span>6</span></a>
                <ul>
                  <li><a href="login.html">Login</a></li>                  
                  <li><a href="search.html">Search</a></li>
                  <li><a href="mail.html">Mail</a></li>
                  <li><a href="profile.html">Profile</a></li>
                  <li><a href="invoice.html">Invoice</a></li>
                  <li class="sub"> 
                    <a href="#">Error<span>6</span></a>
                    <ul>
                      <li><a href="error_403.html">403</a></li>
                      <li><a href="error_404.html">404</a></li>
                      <li><a href="error_405.html">405</a></li>
                      <li><a href="error_500.html">500</a></li>
                      <li><a href="error_503.html">503</a></li>
                      <li><a href="offline.html">Offline</a></li>
                    </ul>
                  </li>                  
                </ul>
              </li>                        
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="row-fluid">
            <div class="span12">

              <ul class="breadcrumb br_styled no_space">
                <li>
                  <a href="index-2.html">Dashboard</a> <span class="divider">/</span>
                </li>                
                <li class="active">Forms - layout</li>
              </ul> 
              <ul class="page_info">
                <li><h2>Forms - layout</h2></li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
              </ul>     

              <div class="span12 no_space form_align">
                  <div class="widget">
                    <header>
                      <h3>Basic form</h3>
                      <ul class="toggle_content">                         
                          <li class="arrow"><a href="#">Toggle Content</a></li>
                      </ul>
                    </header>
                    <section class="welly">                         
<pre class="prettyprint linenums">
&lt;form class="well"&gt;
  &lt;label&gt;Label name&lt;/label&gt;
  &lt;input type="text" class="span3" placeholder="Type something…"&gt;
  &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Check me out
  &lt;/label&gt;
  &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
&lt;/form&gt;
</pre>  
                      <form class="well basic_from">
                        <label>Label name</label>
                        <input type="text" class="span3" placeholder="Type something…">
                        <p class="help-block">Example block-level help text here.</p>
                        <label class="checkbox">
                          <input type="checkbox"> Check me out
                        </label>
                        <button type="submit" class="btn btn-inverse">Submit</button>
                      </form>          
                    </section>
                  </div>

                  <div class="widget">
                    <header>
                      <h3>Search form</h3>
                      <ul class="toggle_content">                         
                          <li class="arrow"><a href="#">Toggle Content</a></li>
                      </ul>
                    </header>
                    <section class="welly">                         
<pre class="prettyprint linenums">
&lt;form class="well form-search"&gt;
  &lt;input type="text" class="input-medium search-query"&gt;
  &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
&lt;/form&gt;
</pre> 
                      <form class="well form-search">
                        <input type="text" class="input-medium search-query">
                        <button type="submit" class="btn btn-info">Search</button>
                      </form>          
                    </section>
                  </div>
                  
                  <div class="widget">
                    <header>
                      <h3>Inline form</h3>
                      <ul class="toggle_content">                         
                          <li class="arrow"><a href="#">Toggle Content</a></li>
                      </ul>
                    </header>
                    <section class="welly">                         
<pre class="prettyprint linenums">
&lt;form class="well form-inline"&gt;
  &lt;input type="text" class="input-small" placeholder="Email"&gt;
  &lt;input type="password" class="input-small" placeholder="Password"&gt;
  &lt;label class="checkbox"&gt;
    &lt;input type="checkbox"&gt; Remember me
  &lt;/label&gt;
  &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
&lt;/form&gt;
</pre> 
                      <form class="well form-inline">
                        <input type="text" class="input-small" placeholder="Email">
                        <input type="password" class="input-small" placeholder="Password">
                        <label class="checkbox">
                          <input type="checkbox"> Remember me
                        </label>
                        <button type="submit" class="btn">Sign in</button>
                      </form>          
                    </section>
                  </div>

                  <div class="widget">
                    <header>
                      <h3>Horizontal forms</h3>
                      <ul class="toggle_content">                        
                          <li class="arrow"><a href="#">Toggle Content</a></li>
                      </ul>
                    </header>
                    <section class="welly">
                    <p>Example markup</p>                         
<pre class="prettyprint linenums">
&lt;form class="form-horizontal"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Legend text&lt;/legend&gt;
    &lt;div class="control-group"&gt;
      &lt;label class="control-label" for="input01"&gt;Text input&lt;/label&gt;
      &lt;div class="controls"&gt;
        &lt;input type="text" class="input-xlarge" id="input01"&gt;
        &lt;p class="help-block"&gt;Supporting help text&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</pre> 
                      <form class="well form-horizontal">
                        <fieldset>
                          <div class="control-group">
                            <label class="control-label" for="input01">Text input</label>
                            <div class="controls">
                              <input type="text" class="input-xlarge" id="input01">
                              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="optionsCheckbox">Checkbox</label>
                            <div class="controls">
                              <label class="checkbox">
                                <input type="checkbox" id="optionsCheckbox" value="option1">
                                Option one is this and that&mdash;be sure to include why it's great
                              </label>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="select01">Select list</label>
                            <div class="controls">
                              <select id="select01">
                                <option>something</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                              </select>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="multiSelect">Multicon-select</label>
                            <div class="controls">
                              <select multiple="multiple" id="multiSelect">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                              </select>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="fileInput">File input</label>
                            <div class="controls">
                              <input class="input-file" id="fileInput" type="file">
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="textarea">Textarea</label>
                            <div class="controls">
                              <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
                            </div>
                          </div>
                          <div class="form-actions">
                            <button type="submit" class="btn btn-success">Save changes</button>
                            <button class="btn btn-danger">Cancel</button>
                          </div>
                        </fieldset>
                      </form>          
                    </section>
                  </div>

                  <div class="widget">
                    <header>
                      <h3>Form control states</h3>
                      <ul class="toggle_content">                         
                          <li class="arrow"><a href="#">Toggle Content</a></li>
                      </ul>
                    </header>
                    <section class="welly">                         

                      <form class="form-horizontal">
                        <fieldset>
                          <div class="control-group">
                            <label class="control-label" for="focusedInput">Focused input</label>
                            <div class="controls">
                              <input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label">Uneditable input</label>
                            <div class="controls">
                              <span class="input-xlarge uneditable-input">Some value here</span>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="disabledInput">Disabled input</label>
                            <div class="controls">
                              <input class="input-xlarge disabled" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="optionsCheckbox2">Disabled checkbox</label>
                            <div class="controls">
                              <label class="checkbox">
                                <input type="checkbox" id="optionsCheckbox2" value="option1" disabled>
                                This is a disabled checkbox
                              </label>
                            </div>
                          </div>
                          <div class="control-group warning">
                            <label class="control-label" for="inputWarning">Input with warning</label>
                            <div class="controls">
                              <input type="text" id="inputWarning">
                              <span class="help-inline">Something may have gone wrong</span>
                            </div>
                          </div>
                          <div class="control-group error">
                            <label class="control-label" for="inputError">Input with error</label>
                            <div class="controls">
                              <input type="text" id="inputError">
                              <span class="help-inline">Please correct the error</span>
                            </div>
                          </div>
                          <div class="control-group success">
                            <label class="control-label" for="inputSuccess">Input with success</label>
                            <div class="controls">
                              <input type="text" id="inputSuccess">
                              <span class="help-inline">Woohoo!</span>
                            </div>
                          </div>
                          <div class="control-group success">
                            <label class="control-label" for="selectError">Select with success</label>
                            <div class="controls">
                              <select id="selectError">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                              </select>
                              <span class="help-inline">Woohoo!</span>
                            </div>
                          </div>                          
                        </fieldset>
                      </form>          
                    </section>
                  </div>

                  <div class="widget">
                    <header>
                      <h3>Extending form controls</h3>
                      <ul class="toggle_content">                         
                          <li class="arrow"><a href="#">Toggle Content</a></li>
                      </ul>
                    </header>
                    <section class="welly">                         
 
                      
                      <form class="form-horizontal">
                        <fieldset>
                          <div class="control-group">
                            <label class="control-label">Form grid sizes</label>
                            <div class="controls widget_input_sizes">
                              <input class="span1" type="text" placeholder=".span1">
                              <input class="span2" type="text" placeholder=".span2">
                              <input class="span3" type="text" placeholder=".span3">
                              <select class="span1">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                              </select>
                              <select class="span2">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                              </select>
                              <select class="span3">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                              </select>
                              <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label">Alternate sizes</label>
                            <div class="controls widget_input_sizes">
                              <input class="input-mini" type="text" placeholder=".input-mini">
                              <input class="input-small" type="text" placeholder=".input-small">
                              <input class="input-medium" type="text" placeholder=".input-medium">
                              <p class="help-block">You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <code>input</code> vs. <code>select</code>).</p>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="prependedInput">Prepended text</label>
                            <div class="controls input_align">
                              <div class="input-prepend">
                                <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
                              </div>
                              <p class="help-block">Here's some help text</p>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="appendedInput">Appended text</label>
                            <div class="controls input_align">
                              <div class="input-append">
                                <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
                              </div>
                              <span class="help-inline">Here's more help text</span>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="appendedPrependedInput">Append and prepend</label>
                            <div class="controls input_align">
                              <div class="input-prepend input-append">
                                <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
                              </div>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="appendedInputButton">Append with button</label>
                            <div class="controls input_align">
                              <div class="input-append">
                                <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
                              </div>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="appendedInputButtons">Two-button append</label>
                            <div class="controls input_align">
                              <div class="input-append">
                                <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
                              </div>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="inlineCheckboxes">Inline checkboxes</label>
                            <div class="controls">
                              <label class="checkbox inline">
                                <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                              </label>
                              <label class="checkbox inline">
                                <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                              </label>
                              <label class="checkbox inline">
                                <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                              </label>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label" for="optionsCheckboxList">Checkboxes</label>
                            <div class="controls">
                              <label class="checkbox">
                                <input type="checkbox" name="optionsCheckboxList1" value="option1">
                                Option one is this and that&mdash;be sure to include why it's great
                              </label>
                              <label class="checkbox">
                                <input type="checkbox" name="optionsCheckboxList2" value="option2">
                                Option two can also be checked and included in form results
                              </label>
                              <label class="checkbox">
                                <input type="checkbox" name="optionsCheckboxList3" value="option3">
                                Option three can&mdash;yes, you guessed it&mdash;also be checked and included in form results
                              </label>
                              <p class="help-block"><strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.</p>
                            </div>
                          </div>
                          <div class="control-group">
                            <label class="control-label">Radio buttons</label>
                            <div class="controls">
                              <label class="radio">
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                Option one is this and that&mdash;be sure to include why it's great
                              </label>
                              <label class="radio">
                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                Option two can be something else and selecting it will deselect option one
                              </label>
                            </div>
                          </div>                            
                        </fieldset>
                      </form>            
                    </section>
                  </div>

                  <div class="widget">
                    <header>
                      <h3>Alert messages</h3>
                      <ul class="toggle_content">                        
                          <li class="arrow"><a href="#">Toggle Content</a></li>
                      </ul>
                    </header>
                    <section class="welly"> 

                      <div class="alert">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>Warning!</strong> Best check yo self, you're not looking too good.
                      </div>

                      <div class="alert alert-error">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>Oh snap!</strong> Change a few things up and try submitting again.
                      </div>

                      <div class="alert alert-success">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>Well done!</strong> You successfully read this important alert message.
                      </div>

                      <div class="alert alert-info">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                      </div>

                    </section>
                  </div>

                  

              </div>

            </div>                  
          </div><!--/row-->
        
        </div><!--/span-->
      </div><!--/row-->      
      <hr>

      <footer>
        <p>&copy; LoxDesign.net - Phoenix 2012</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- ===================== CHAT - Modal ===================== -->
    <div id="chat_modal" class="chat_modal modal fade hide">
      <div class="modal-header">
        <ul>
          <li class="toggle_users"><a href="#">Show Users</a></li>
          <li class="status">
            <a class="online" href="#"><span>Status</span></a>  
            <ul>
               <li><a class="online" href="#" title="Online"><span>Online</span></a></li>
               <li><a class="away" href="#" title="Away"><span>Away</span></a></li>
               <li><a class="busy" href="#" title="Busy"><span>Busy</span></a></li>
               <li><a class="invisiblee" href="#" title="Invisible"><span>Invisible</span></a></li>
               <li><a class="offline" href="#" title="Offline"><span>Offline</span></a></li>
             </ul> 
          </li>
          <li class="chat_name">John Doe</li>
        </ul>       
        <button type="button" class="close" data-dismiss="modal">x</button>        
      </div>
      <div class="modal-body">
        <div class="msg_cont left">
          <img src="img/general/user_1.jpg" width="50" height="50" alt="User">
          <ul>
            <li>
              <h3>John Doe:</h3> 
              <span>16 minutes ago</span>
            </li>
            <li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in dui tortor. Mauris sed volutpat
metus. Duis ut sapien sapien, id pellentesque orci. Nullam nisl metus, sodales ut laoreet 
eget, pretium porttitor quam. Sed varius vulputate lacinia. </li>
          </ul>    
        </div>
        <div class="msg_cont right">
          <img src="img/general/user_2.jpg" width="50" height="50" alt="User">
          <ul>
            <li>
              <h3>Jessie Doe:</h3> 
              <span>16 minutes ago</span>
            </li>
            <li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in dui tortor. Mauris sed volutpat
metus. Duis ut sapien sapien, id pellentesque orci. Nullam nisl metus, sodales ut laoreet 
eget, pretium porttitor quam. Sed varius vulputate lacinia. </li>
          </ul>    
        </div>
        <div class="msg_cont left">
          <img src="img/general/user_1.jpg" width="50" height="50" alt="User">
          <ul>
            <li>
              <h3>John Doe:</h3> 
              <span>16 minutes ago</span>
            </li>
            <li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in dui tortor. Mauris sed volutpat
metus. Duis ut sapien sapien, id pellentesque orci. Nullam nisl metus, sodales ut laoreet 
eget, pretium porttitor quam. Sed varius vulputate lacinia. </li>
          </ul>    
        </div>        
      </div>
      <div class="modal-footer">        
        <textarea></textarea>
        <a href="#" class="btn btn-inverse">Send</a>
      </div>
    </div>

    <!-- ===================== JS ===================== -->
    <script src="js/libs/jquery-1.7.2.min.js"></script>    
    <script src="js/libs/bootstrap.min.js"></script>   
    <script src="js/libs/ios-orientationchange-fix.js"></script>      
    <script src="js/libs/jquery-ui-1.8.20.custom.min.js"></script>      
    <script src="js/common.js"></script>                 
    
    <!-- Site specific - JS --> 
    <script src="js/libs/prettify.js"></script> 
    <script src="js/script.js"></script>
    <script src="js/specific/forms_layout.js"></script>

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-31818910-2']);
      _gaq.push(['_setDomainName', 'loxdesign.net']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
  </body>

</html>